본문으로 건너뛰기

컴포넌트 이벤트 처리

React에서 이벤트 처리는 매우 중요합니다. 사용자가 버튼을 클릭하거나 입력 필드에 텍스트를 입력할 때마다 이벤트가 발생합니다. React에서는 이러한 이벤트를 처리하기 위해 함수형 컴포넌트와 다양한 이벤트 핸들러를 사용합니다. 이번 섹션에서는 React 컴포넌트에서 이벤트를 처리하는 방법을 구체적인 코드 예시와 함께 살펴보겠습니다.

이벤트 처리 기본 개념​

React에서는 DOM 이벤트를 처리하기 위해 함수형 컴포넌트를 사용합니다. 이벤트 핸들러는 보통 이벤트가 발생했을 때 실행될 함수로 정의됩니다. 예를 들어, 버튼을 클릭하면 handleClick 함수가 실행되도록 할 수 있습니다.

다음은 기본적인 클릭 이벤트 처리 예시입니다:

import React from 'react';

function App() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return (
    <div>
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
}

export default App;

위 코드에서는 버튼을 클릭하면 handleClick 함수가 실행되어 경고 창이 나타납니다.

이벤트 핸들러에 인자 전달하기​

이벤트 핸들러에 인자를 전달하고 싶을 때는 함수를 감싸서 새로운 함수를 만들어야 합니다. 예를 들어, 특정 ID를 가진 항목을 처리하는 경우를 생각해볼 수 있습니다.

import React from 'react';

function App() {
  const handleClick = (id) => {
    alert(`아이템 ID: ${id}`);
  };

  return (
    <div>
      <button onClick={() => handleClick(1)}>아이템 1</button>
      <button onClick={() => handleClick(2)}>아이템 2</button>
    </div>
  );
}

export default App;

위 코드에서는 버튼을 클릭할 때마다 해당 아이템의 ID를 알림 창에 표시합니다.

폼 이벤트 처리​

폼 이벤트는 사용자 입력을 처리하는 데 필수적입니다. onChange 이벤트를 사용하여 입력 필드의 변화를 감지하고 상태를 업데이트할 수 있습니다.

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`입력한 값: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default App;

여기서 handleChange 함수는 입력 필드의 변화를 감지하고 inputValue 상태를 업데이트합니다. handleSubmit 함수는 폼 제출을 처리하며, 기본 폼 동작을 막고 알림 창을 표시합니다.

주의할 점​

  1. 이벤트 핸들러 바인딩: 함수형 컴포넌트에서는 이벤트 핸들러를 정의할 때마다 새로운 함수가 생성되지 않도록 주의해야 합니다. 가능하면 useCallback 훅을 사용하여 함수 생성 비용을 줄이는 것이 좋습니다.
  2. 이벤트 객체 사용: 이벤트 핸들러에서 이벤트 객체를 사용할 때는 필요한 정보만 추출하여 사용하는 것이 좋습니다. 이벤트 객체는 synthetic event로, 비동기적으로 작동합니다.
  3. 상태 관리: 이벤트 핸들러에서 상태를 업데이트할 때는 최신 상태를 기반으로 상태를 변경하는 방법을 사용해야 합니다.
import React, { useState, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <p>클릭 횟수: {count}</p>
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
}

export default App;

위 예시에서는 useCallback 훅을 사용하여 handleClick 함수가 컴포넌트의 재렌더링 시마다 재생성되지 않도록 하고 있습니다.

더 알아보기​

  • SyntheticEvent: React에서 사용하는 이벤트 래퍼에 대해 자세히 알아보세요.
  • useCallback: 이벤트 핸들러 최적화를 위해 사용되는 훅.
  • 폼과 입력 관리: 폼의 상태를 효율적으로 관리하는 방법.

내용 요약과 다음 주제​

이번 주제에서는 React에서 이벤트를 처리하는 기본 개념과 예시를 살펴보았습니다. 이벤트 핸들러의 정의와 인자 전달, 폼 이벤트 처리, 그리고 이벤트 핸들러 최적화에 대해 다루었습니다. 다음 주제인 JSX의 조건부 렌더링과 반복 처리에서는 조건에 따라 컴포넌트를 렌더링하는 방법과 리스트를 반복 렌더링하는 방법에 대해 살펴보겠습니다.